<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script>
        window.scratchJrPage = 'inappInterfaceGuide';
    </script>
    <script type="text/javascript" src="../app.bundle.js"></script>
  </head>
  <body>
    <div id="content">
      <div id="content-buffer">
      </div>
      <div id="ipad-project-view-wrapper">
        <div class="learn-tab learn-tab-selected learn-interface">
          <!-- 1. Save -->
          <div class="interface-button interface-button-selected" id="interface-button-save">
            <div class="interface-button-text">1</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-save"></div>
          <div class="interface-dot" id="interface-dot-save"></div>
          <!-- 2. Stage -->
          <div class="interface-button" id="interface-button-stage">
            <div class="interface-button-text">2</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-stage-1"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-stage-1"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-stage-2"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-stage-2"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-stage-3"></div>
          <!-- 3. Presentation Mode -->
          <div class="interface-button" id="interface-button-presentation-mode">
            <div class="interface-button-text">3</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-presentation-mode"></div>
          <div class="interface-dot" id="interface-dot-presentation-mode"></div>
          <!-- 4. Grid -->
          <div class="interface-button" id="interface-button-grid">
            <div class="interface-button-text">4</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-grid"></div>
          <div class="interface-dot" id="interface-dot-grid"></div>
          <!-- 5. Change Background -->
          <div class="interface-button" id="interface-button-add-text">
            <div class="interface-button-text">5</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-add-text"></div>
          <div class="interface-dot" id="interface-dot-add-text"></div>
          <!-- 6. Add Text -->
          <div class="interface-button" id="interface-button-change-background">
            <div class="interface-button-text">6</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-change-background"></div>
          <div class="interface-dot" id="interface-dot-change-background"></div>
          <!-- 7. Reset Characters -->
          <div class="interface-button" id="interface-button-reset-characters">
            <div class="interface-button-text">7</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-reset-characters"></div>
          <div class="interface-dot" id="interface-dot-reset-characters"></div>
          <!-- 8. Green Flag -->
          <div class="interface-button" id="interface-button-green-flag">
            <div class="interface-button-text">8</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-green-flag"></div>
          <div class="interface-dot" id="interface-dot-green-flag"></div>
          <!-- 9. Pages -->
          <div class="interface-button" id="interface-button-pages">
            <div class="interface-button-text">9</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-pages"></div>
          <div class="interface-dot" id="interface-dot-pages"></div>
          <!-- 10. Project Information -->
          <div class="interface-button" id="interface-button-project-information">
            <div class="interface-button-text">10</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-project-information"></div>
          <div class="interface-dot" id="interface-dot-project-information"></div>
          <!-- 16. Characters -->
          <div class="interface-button" id="interface-button-characters">
            <div class="interface-button-text">16</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-characters-1"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-characters-3"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-characters"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-characters-2"></div>
          <!-- 15. Block Categories -->
          <div class="interface-button" id="interface-button-block-categories">
            <div class="interface-button-text">15</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-block-categories-1"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-block-categories"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-block-categories-2"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-block-categories-3"></div>
          <!-- 14. Blocks Palette -->
          <div class="interface-button" id="interface-button-block-palette">
            <div class="interface-button-text">14</div>
          </div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-blocks-palette"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-1"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-2"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-3"></div>
          <!-- 13. Programming Area -->
          <div class="interface-button" id="interface-button-programming-area">
            <div class="interface-button-text">13</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-programming-area"></div>
          <div class="interface-dot" id="interface-dot-programming-area"></div>
          <!-- 12. Programming Script -->
          <div class="interface-button" id="interface-button-programming-script">
            <div class="interface-button-text">12</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-programming-script-1"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-programming-script"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-programming-script-2"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-programming-script-3"></div>
          <!-- 11. Undo Redo -->
          <div class="interface-button" id="interface-button-undo-redo">
            <div class="interface-button-text">11</div>
          </div>
          <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-1"></div>
          <div class="interface-horizontal-line" id="interface-horizontal-line-undo-redo"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-2"></div>
          <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-3"></div>
          <img class="ipad-project-view" src="images/interface.png" />
          <div id="right-column">
            <div id="interface-key">
              <div id="interface-key-header">
              </div>
              <div id="interface-key-description">
              </div>
            </div>
            <div id="video-wrapper">
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
